<script setup>
import { ref, reactive, computed, provide} from 'vue'
import usePager from '@/core/hooks/useRequestPager'
import bannerApi from '@/api/advert/BannerApi'
import TableActionBar from '@/components/TableActionBar.vue'
import useTableBarEvent from '@/core/hooks/useTableBarEvent'
import { NormalStateColors } from '@/core/config/ColorMap'

import BannerForm from './BannerForm.vue'
import BannerView from './BannerView.vue'
//
const editorForm = ref(null) //编辑表单
const previewForm = ref(null) //预览表单
const selectedKeys= ref([]) // 选中KEY

const {
  run,
  refresh,
  loading,
  dataSource,
  pagination,
  handleTableChange, handleSearch
} = usePager(bannerApi.getListByPage)

// 定义列表字段
const columns = [
  { title: '位置', dataIndex: 'positionId' },
  { title: '标题', dataIndex: 'title' },
  { title: '图片', dataIndex: 'iamges' },
  { title: '排序', dataIndex: 'idx' },
  { title: '状态', dataIndex: 'state', width: '60px' },
  { title: '创建时间/人', dataIndex: 'createOn', width: '210px' },
  { title: '操作', dataIndex: 'operation',  key: 'operation',  fixed: 'right',  width: '100px'  }
]

// 表格头动作
const options = reactive({
  pageAction: { refresh, run }, 
  editor: computed(() => editorForm.value),  // 编辑器
  viewer: computed(()=> previewForm.value),  // 查看器
  selectedKeys: computed(() => selectedKeys.value), // 选中的数据的KEY集
  deleteService: bannerApi.removeData, //api服务 - 册除
})
const { AllEvent, viewEvent, editEvent } = useTableBarEvent(options)
// 表格行选项事件
const rowSelection = {
  onChange: (selectedRowKeys) => { selectedKeys.value = selectedRowKeys }
  // getCheckboxProps: record => { return { disabled: record.state.value === '3'  }  }
}
// 刷新数据-调用refresh方法
provide('refreshData', refresh )
// 刷新页面-调用run方法
provide('refreshPage', run )
</script>
<template>
  <a-row :gutter="[16,16]">
    <a-col :span="24">
      <!-- 数据列表-->
      <a-table
        :row-selection="rowSelection"
        :data-source="dataSource"
        :columns="columns"
        :loading="loading"
        :pagination="pagination"
        :row-key="record=>record.id"
        @change="handleTableChange"
      >
        <!-- 标题 -->
        <template #title>
          <table-action-bar
            :actions="['refresh', 'add', 'edit', 'delete']"
            :on-refresh="refresh"
            :all-event="AllEvent"
            :on-search="handleSearch"
            :advanced="false" />
        </template>
        <!-- 字段 -->
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'operation'">
            <a-button type="dashed" title="查看" @click="viewEvent(record.id)">
              <template #icon><file-search-outlined /></template>
            </a-button>
            <a-button type="dashed" title="编辑" @click="editEvent(record.id)">
              <template #icon><edit-outlined /></template>
            </a-button>
          </template>
          <!-- 状态 -->
          <template v-else-if="column.dataIndex === 'state'">
            <a-tag :color="NormalStateColors[record.state?.value]">{{ record.state?.label }}</a-tag>
          </template>
          <template v-else-if="column.dataIndex === 'createOn'">
            {{ record.createOn }}/{{ record.createBy }}
          </template>
        </template>
      </a-table>
      <!-- 编辑-表单 -->
      <banner-form ref="editorForm" />
      <!-- 预览-表单 -->
      <banner-view ref="previewForm" />
    </a-col>
  </a-row>
</template>